Menú con gradient CSS3

Este menú está creado con CSS3,  consiguiendo un elegante efecto hover con gradient,  la idea es de Insicdesigns. basándose en el menú de Dragon Interactive

Para añadirlo a nuestro blog editamos un gadget de HTML y en su interior añadimos:

<div class="wrapper">
<div class="container">
<ul class="menu" rel="sam1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Enlace- 1</a></li>
<li><a href="#">Enlace- 2</a></li>
<li><a href="#">Enlace- 3</a></li>
<li><a href="#">Enlace- 4</a></li>
<li><a href="#">Enlace- 5</a></li>
<li><a href="#">Enlace- 6</a></li>
<li><a href="#">Enlace- 7</a></li>
</ul>
</div>
</div>

Guardamos los cambios y en plantilla edición de HTML justo antes de ]]></b:skin> añadimos los estilos:

.wrapper {
background : -webkit-gradient(linear, left top, left bottom, from(#A8A8A8), to(#454545));
  background: -moz-linear-gradient(center top , #A8A8A8, #454545);
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFA8A8A8', EndColorStr='#FF454545');zoom:1;
    width: 100%;
    height: 80px;
    background : #464646;
    position: relative;
    margin-bottom: 30px;
}

ul {
    margin: 0;
    padding: 0;
}

ul.menu {
    height: 80px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left;
}

ul.menu li {
    list-style: none;
    float:left;
    height: 79px;
    text-align: center;
background: -moz-radial-gradient(center 80px 45deg, circle farthest-corner, #1FA9F4 0%, #001C4E 100%);
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(#1FA9F4), to(#001C4E) );
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF001C4E', EndColorStr='#FF1FA9F4');zoom:1;
    }

ul li a {
  background : -webkit-gradient(linear, left top, left bottom, from(#A8A8A8), to(#454545));
  background: -moz-linear-gradient(center top , #A8A8A8, #454545);
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFA8A8A8', EndColorStr='#FF454545');zoom:1;
    color: #363636;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 79px;
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }

ul li a:hover {
    background: none;
    filter:none;
   }

ul li.active a{
    background: -moz-radial-gradient(center 80px 45deg, circle farthest-corner, #1FA9F4 0%, #001C4E 100%);
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(#1FA9F4), to(#001C4E) );
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF001C4E', EndColorStr='#FF1FA9F4');zoom:1;
}

Añadimos nuestro enlaces editando el gadget de HTML y sustituyendo el texto que hará de enlace por nuestro texto, la almohadilla  # la sustituimos por la url del sitio que vamos a enlazar.

Si deseamos añadir más enlaces bastará con añadir tantas lineas como enlaces deseamos añadir.

<li><a href="#">Enlace- 7</a></li>

<li><a href="#">Enlace- 8</a></li>

<li><a href="#">Enlace- 9</a></li>

Actualizado

Se han actualizado los estilos del menú para conseguir que en Explorer se visualice el efecto hover, algo muy laborioso de conseguir.

Gracias Vagabundia.